<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>个人资料</title>

		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../css/infstyle.css" rel="stylesheet" type="text/css">

		<script type="text/javascript" src="../js/vue2.5.js"></script>
		<script src="../js/axios.min.js"></script>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/global.js"></script>
		<!-- <script type="text/javascript" src="../js/bootstrap/js/bootstrap.js"></script> -->
		<script src="../js/layer/layer.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
	</head>

	<body>
		<div class="container">
			<div class="nav-table">
				<div class="long-title"><span class="all-goods">全部分类</span></div>
				<div class="nav-cont">
					<ul>
							<li class="index"><a href="../index.html">首页</a></li>
							<li class="qc"><a href="text.html">推荐</a></li>
							<li class="qc"><a href="../home/search.html">搜索</a></li>
							<li class="qc"><a href="#">团购</a></li>
							<li class="qc last"><a href="about.html">我们</a></li>
						</ul>
				</div>
			</div>
			<b class="line"></b>
			<div class="center">
				<div class="col-main">
					<div class="main-wrap">

						<div class="user-info">
							<!--标题 -->
							<div class="am-cf am-padding">
								<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
							</div>
							<hr/>

							<!--头像 -->
							<div class="user-infoPic">

								<div class="filePic">

									<a href="javascript:;" @click="updatePic()"  title="点击修改用户头像">
										<img src="../images/default.jpg" id="Pic" class=" am-circle am-img-thumbnail" />
									</a>
								</div>

								<p class="am-form-help">头像</p>

								<div class="info-m">
									<div><b>用户名：<i>{{user.LoginName}}</i></b></div>
									<div class="vip">
										<span></span><a href="#">会员专享</a>
									</div>
								</div>
							</div>

							<!--个人信息 -->
							<div class="info-main">
								<form class="am-form am-form-horizontal">

									<div class="am-form-group">
										<label for="user-name" class="am-form-label">姓名</label>
										<div class="am-form-content">
											<input type="text" v-model="user.name" id="name" name="name" placeholder="name">
										</div>
									</div>

									<div class="am-form-group">
										<label class="am-form-label">性别</label>
										<div class="am-form-content sex">
											<label class="am-radio-inline">
											<input type="radio" name="sex" value="男" v-model="user.sex" data-am-ucheck> 男
										</label>
											<label class="am-radio-inline">
											<input type="radio" name="sex" value="女" v-model="user.sex" data-am-ucheck> 女
										</label>
											<label class="am-radio-inline">
											<input type="radio" name="sex" value="保密" v-model="user.sex" data-am-ucheck > 保密
										</label>
										</div>
									</div>

									<div class="am-form-group">
										<label for="user-birth" class="am-form-label">生日</label>
										<div class="am-form-content birth">
											<div class="birth-select">
												<select id="year">
												<option value="0">--请选择--</option>
											</select>
												<em>年</em>
											</div>
											<div class="birth-select2">
												<select id="month">
												<option value="0">--请选择--</option>
											</select>
												<em>月</em>
											</div>
											<div class="birth-select2">
												<select id="day">
												<option value="0">--请选择--</option>
												
											</select>
												<em>日</em>
											</div>

										</div>

									</div>
									<div class="am-form-group">
										<label for="user-phone" class="am-form-label">电话</label>
										<div class="am-form-content">
											<input v-model="user.phone" id="phone" name="phone" placeholder="telephonenumber" type="tel">

										</div>
									</div>
									<div class="am-form-group">
										<label for="user-email" class="am-form-label">电子邮件</label>
										<div class="am-form-content">
											<input v-model="user.email" id="email" name="email" placeholder="Email" type="email">

										</div>
									</div>
									<div class="am-form-group address">
										<label for="user-address" class="am-form-label">收货地址</label>
										<div class="am-form-content address">
											<a href="address.html">
												<p class="new-mu_l2cw">
													<span class="province">湖北</span>省
													<span class="city">武汉</span>市
													<span class="dist">洪山</span>区
													<span class="street">雄楚大道666号(中南财经政法大学)</span>
													<span class="am-icon-angle-right"></span>
												</p>
											</a>

										</div>
									</div>
									<div class="am-form-group safety">
										<label for="user-safety" class="am-form-label">账号安全</label>
										<div class="am-form-content safety">
											<a href="safety.html">

												<span class="am-icon-angle-right"></span>

											</a>

										</div>
									</div>
									<div class="info-btn">
										<input type="button" value="保存修改" class="am-btn am-btn-danger" id="updateBtn" @click="update()" />
										<!-- <div class="am-btn am-btn-danger"></div> -->
									</div>

								</form>
							</div>

						</div>

					</div>
					<!--底部-->
					<div class="footer">
						<div class="footer-hd">
							<p>

								<b>|</b>
								<a href="#">商城首页</a>
								<b>|</b>
								<a href="#">支付宝</a>
								<b>|</b>
								<a href="#">物流</a>
							</p>
						</div>
						<div class="footer-bd">
							<p>

								<a href="#">合作伙伴</a>
								<a href="#">联系我们</a>
								<a href="#">网站地图</a>
								<em>© XXXXXX<a href="http://www.cssmoban.com/" target="_blank" title="模板之家"></a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank"></a></em>
							</p>
						</div>
					</div>
				</div>

				<aside class="menu">
				<ul>
					<li class="person active">
						<a href="person/index.html"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<!--管理员界面-->
					<li class="person">
						<p><i class="am-icon-qq"></i>管理系统</p>
						<ul>
							<li> <a href="querygoods.html">商品管理</a></li>
							<li> <a href="queryorder.html">订单管理</a></li>		
							
						</ul>
					</li>
					<!--普通界面-->
					<li class="person">
						<p><i class="am-icon-newspaper-o"></i>个人资料</p>
						<ul>
							<li> <a href="information.html">个人信息</a></li>
							<li> <a href="safety.html">安全设置</a></li>
							<li> <a href="address.html">地址管理</a></li>
							
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-balance-scale"></i>我的交易</p>
						<ul>
							<li><a href="order.html">订单管理</a></li>
							<li> <a href="change.html">退款售后</a></li>
							<li> <a href="comment.html">评价商品</a></li>
						</ul>
					</li>
					
					<li class="person">
						<p><i class="am-icon-tags"></i>我的收藏</p>
						<ul>
							<li> <a href="collection.html">收藏</a></li>
																		
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-qrcode"></i>在线客服</p>
						<ul>
							<li> <a href="suggest.html">意见反馈</a></li>		
							<li> <a href="news.html">我的消息</a></li>
						</ul>
					</li>
					
				</ul>

			</aside>
			</div>
		</div>
		<script>
			var id = localStorage.getItem('id');
			//vue
			var vue = new Vue({
				el: '.container',
				data: {
					user: {
						id: '',
						LoginName: '',
						email: '',
						phone: '',
						name: '',
						sex: '',
						birthday: ''
					}
				},
				methods: {
					//表单回显
					get: function() {

						axios.get(baseUrl + '/user/get', {

								params: {
									LoginName: localStorage.getItem('LoginName')
								}

							}).then(function(response) {
								this.user.id = response.data.id;
								this.user.LoginName = response.data.loginName;
								this.user.email = response.data.email;
								this.user.phone = response.data.phone;
								this.user.name = response.data.name;
								this.user.sex = response.data.sex;
								var birth = response.data.birthday;
								var year = birth.split('-')[0];
								var month = birth.split('-')[1];
								var day = birth.split('-')[2];

								if (month < 10) {
									month = month.split('0')[1];
								}
								if (day < 10) {
									day = day.split('0')[1];
								}
								$('#year').val(year);
								$('#month').val(month);
								$('#day').val(day);

							}.bind(this))
							.catch(function(error) {
								
							});
					},
					//更新数据
					update: function() {
						//调用表单验证
						if (!checkForm())
							return;
						var month = $("#month option:selected").text();
						var day = $("#day option:selected").text();
						if (month < 10) {
							month = "0" + month;
						}
						if (day < 10) {
							day = "0" + day;
						}

						axios.get(baseUrl + '/user/update', {
								params: {
									name: $('#name').val(),
									email: $('#email').val(),
									phone: $('#phone').val(),
									birthday: $("#year option:selected").text() + "-" + month + "-" + day,
									sex: $("input[name='sex']:checked").val(),
									id: id
								}
							})
							.then(function(response) {
								layer.msg('修改信息成功');

							})
							.catch(function(error) {

								layer.msg('请求失败');
							});
					},updatePic(){
						layer.open({
							title:'修改头像',
						    type: 2, 				   
						    area: ['900px', '600px'], //宽高
						    content: '../UpdateUserPic.html'
						});
						
					}

				},
				mounted: function() {
					this.get();
				}

			});

			//表单验证函数
			function checkForm() {

				//邮箱验证
				var email = $('#email');
				var r = /^\w+@\w+(\.\w+){1,2}$/;

				if (r.test(email.val()) != true || email.val() == '') {
					layer.msg('邮箱格式不正确');
					email.focus();
					return false;
				}

				//手机验证
				var phone = $('#phone');
				r = /^1[3-9]\d{9}$/;

				if (r.test(phone.val()) != true || phone.val() == '') {
					layer.msg('手机格式不正确');
					phone.focus();
					return false;
				}

				return true;
			}
		</script>
		<script>
			(function() {
				function selectFun(eleId, start, end) {
					for (start; start <= end; start++) {
						eleId.add(new Option(start, start));
					}
				}
				var startY = 1970;
				var end = new Date().getFullYear();
				var year = document.getElementById("year");
				var month = document.getElementById("month");
				var day = document.getElementById("day")
				selectFun(year, startY, end);

				function years() {
					month.length = 1;
					day.length = 1;
					if (this.value != 0) {
						selectFun(month, 1, 12);
					}
				}
				years();

				function months() {
					day.length = 1;
					var value = 1;
					if (value != 0) {
						if (value == 2) {
							if (ifRunYear(year.value)) {
								selectFun(day, 1, 29);
							} else {
								selectFun(day, 1, 28);
							}
						} else if (value == 4 || value == 6 || value == 9 || value == 11) {
							selectFun(day, 1, 30);
						} else {
							selectFun(day, 1, 31);
						}
					}
				}
				months();

				year.onchange = function() {
					month.length = 1;
					day.length = 1;
					if (this.value != 0) {
						selectFun(month, 1, 12);
					}
				}
				month.onchange = function() {
					day.length = 1;
					var value = this.value;
					if (value != 0) {
						if (value == 2) {
							if (ifRunYear(year.value)) {
								selectFun(day, 1, 29);
							} else {
								selectFun(day, 1, 28);
							}
						} else if (value == 4 || value == 6 || value == 9 || value == 11) {
							selectFun(day, 1, 30);
						} else {
							selectFun(day, 1, 31);
						}
					}
				}

				function ifRunYear(year) {
					return (year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0);
				}
			})();

			$(function() {
				if (localStorage.getItem('Pic')) {
					$('#Pic').attr('src', localStorage.getItem('Pic'));
				}

			});
		</script>
	</body>

</html>